<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8"/>
<title>Order</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/lay/layui/css/layui.css}" />
<script th:src="@{/lay/layui/layui.js}"></script>
<script th:src="@{/moon/js/jquery.js}"></script>
<script th:src="@{/moon/js/bootstrap.min.js}"></script>
<script th:src="@{/moon/js/vue.js}"></script>
<!-- <script th:src="@{/layer/layer.js}"></script> -->
<!-- <script th:src="@{/laydate/laydate.js}"></script> -->
<script th:src="@{/page/jqpaginator.js}"></script>
<style type="text/css">
	table{table-layout:fixed;word-break:break-all;text-align: center;}
</style>
</head>
<body class="layui-layout-body">

    	<div style="padding: 15px;" style="width:100%;height:100%;">
	

	<div class="container" id="app">
		<div class="row mt-3 shadow">
			<div class="col bg-info text-white">
				<div class="form-inline">
					<span class="text-grey ml-2">条件搜索:</span>
					<input type="text" class="form-control form-control-sm ml-2" placeholder="_买家账号" style="width:150px" v-model="bname"/>
					<input type="text" class="form-control form-control-sm ml-2" placeholder="_卖家账号" style="width:150px" v-model="sname"/>
					<span class="text-grey ml-2">时间区间:</span>
					<input type="text" class="form-control form-control-sm ml-2" id="date1" placeholder="_请选择范围" style="width:230px"/>
					<button class="btn btn-danger btn-sm ml-2" @click="showorder();">搜索</button>
					<span class="text-grey ml-2">按时间排序:</span>
					<button class="btn btn-success btn-xs ml-2" type="button" @click="timeAsce()">+</button>
					<button class="btn btn-success btn-xs " type="button" @click="timeDesc()">-</button>
					<span class="text-grey ml-2">按金额排序:</span>
					<button class="btn btn-success btn-xs ml-2" type="button" @click="moneyAsce()">+</button>
					<button class="btn btn-success btn-xs " type="button" @click="moneyDesc()">-</button>
				</div>
			</div>
		</div>
		<div class="row mt-3 text-center bg-warning">
		<!-- <input class="form-check-input" type="checkbox" id="selectAll"> -->
			<div class="col-3 ">
				<span>宝贝</span>
			</div>
			<div class="col-2">
				<span>用户</span>
			</div>
			<div class="col-2">
				<span>金额</span>
			</div>
			<div class="col-1">
				<span>订单状态</span>
			</div>
			<div class="col-2">
				<span>支付方式</span>
			</div>
			<div class="col-2">
				<span>操作</span>
			</div>
		</div>
		<div class="row mt-2 text-center bg-info text-white" v-for="o in orderdata">
			<div class="col-3">	
				<!-- 将循环的oid放在隐藏域中 -->
				<!-- <input type="text" :value="o.order.oid" class="d-none" id="oid"/> -->
				<div class="d-none" id="oid">{{o.order.oid}}</div>
				<div class="mt-2">交易时间:{{o.order.dealtime}}</div>
				<div>宝贝编号:{{o.order.gid}}</div>
				<div>宝贝名称:{{o.gname}}</div>
			</div>
			<div class="col-2">
				<div class="mt-3">卖家账户:{{o.sname}}</div>
				<div>买家账户:{{o.bname}}</div>
			</div>
			<div class="col-2">
				<div>成交金额:{{o.order.dealprice}}</div>
				<div>手续费:{{o.order.commision}}</div>
				<div>押金:{{o.deposit}}</div>
				<div>订单金额:{{o.order.ordertotalprice}}</div>
			</div>
			<div class="col-1">
				<div class="mt-4" v-if="o.order.orderstatus == 0">未付款</div>
			    <div class="mt-4" v-if="o.order.orderstatus == 1">待发货</div>
			    <div class="mt-4" v-if="o.order.orderstatus == 2">已发货</div>
			    <div class="mt-4" v-if="o.order.orderstatus == 3">已完成</div>
			</div>
			<div class="col-2">
				<div class="mt-4">{{o.order.paymentchannel}}</div>
			</div>
			<shiro:hasRole name="1">
			<div class="col-2">
				<button class="btn btn-danger btn-sm mt-4" @click="deleteOrder(o.order.oid)">删除</button>
			</div>
			</shiro:hasRole>
		</div>
		<div class="row mt-3" >
			<div id="pager" class="pagination" style="margin:0 auto"></div>
		</div>		
	</div>
	</div>	

	<script type="text/javascript">

	layui.use(['element','layer'], function() {
		var element = layui.element;
		var layer=layui.layer;
	
	
	
		var pageNum = 1;	
		var timeChoose = 0;
		var moneyChoose = 0;
	
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				  elem: '#date1'
				  ,type: 'datetime'
				  ,range: '至'
				  ,format: 'yyyy-MM-dd'
				});
		});
		
		var app = new Vue({
			el:"#app",
			data:{
				orderdata:[],
				bname:"",
				sname:""
			},
			methods:{
				showorder:function(){
					$.post("/auction/Order/selectByCond",{
						date1:$("#date1").val(),
						bname:app.bname,
						sname:app.sname,
						pageNum:pageNum,
						pageSize:5,
						timeChoose:timeChoose,
						moneyChoose:moneyChoose
					},function(data){
						app.orderdata = data.list;
						$("#pager").jqPaginator("option",{
							totalPages:data.pagecount
						});
					});
				},				
				timeAsce:function(){
					if(moneyChoose==1 || moneyChoose==2){
						moneyChoose=0;
						timeChoose = 1;
						app.showorder();
					}
					timeChoose = 1;
					app.showorder();
				},
				timeDesc:function(){
					if(moneyChoose==1 || moneyChoose==2){
						moneyChoose=0;
						timeChoose = 2;
						app.showorder();
					}
					timeChoose = 2;
					app.showorder();
				},
				moneyAsce:function(){
					if(timeChoose==1 || timeChoose==2){
						timeChoose=0;
						moneyChoose = 1;
						app.showorder();
					}
					moneyChoose = 1;
					app.showorder();
				},
				moneyDesc:function(){
					if(timeChoose==1 || timeChoose==2){
						timeChoose=0;
						moneyChoose = 2;
						app.showorder();
					}
					moneyChoose = 2;
					app.showorder();
				},
				deleteOrder:function(oid){
					layer.confirm('此订单将彻底删除,确定删除吗!', {
						btn: ['确定删除','我再考虑一下']
					}, function(){
						$.post("/auction/Order/deleteOrderByOid",{
							oid:oid
						},function(data){
							if(data=='1'){
								layer.msg('删除成功');
								location.href="/auction/Admin/adminiframe/order";
							}else{
								layer.msg('删除失败，请刷新后重试');
							}
						});
					});
				}
			}
		});
		
		$("#pager").jqPaginator({
			totalPages : 1,
			currentPage : 1,
			onPageChange : function(num,type){
				pageNum = num;
				app.showorder();
			}
		});
	});
	</script>
</body>
</html>